<h3>
  formControlName控制时，lv-input可通过lvDisabled或formControlName控制灰化(同一个formItem只能选择一种)，
  其他组件如lv-select可通过lvDisabled控制(不支持formControlName控制)。
</h3>
<button type="button" lv-button (click)="change()">{{ btnText }}</button>
<lv-form [formGroup]="formGroup">
  <lv-form-item>
    <lv-form-label lvRequired>Age</lv-form-label>
    <lv-form-control>
      <input lv-input type="text" formControlName="age" />
    </lv-form-control>
  </lv-form-item>
  <lv-form-item>
    <lv-form-label lvRequired>Password</lv-form-label>
    <lv-form-control lvErrorTip="password cannot be empty">
      <input lv-input type="password" formControlName="password" />
    </lv-form-control>
  </lv-form-item>
  <lv-form-item>
    <lv-form-label lvRequired>Contact</lv-form-label>
    <lv-form-control lvErrorTip="no contact selected">
      <lv-select
        formControlName="contact"
        [lvOptions]="data"
        lvValueKey="label"
        (ngModelChange)="onContactChange($event)"
      >
      </lv-select>
    </lv-form-control>
  </lv-form-item>
  <lv-form-item *ngIf="formGroup.contains('email')">
    <lv-form-label lvRequired [lvLabelTip]="labelTipTpl">
      Email
      <ng-template #labelTipTpl>
        <i lv-icon="icon-help" lv-tooltip="only support mailbox" style="margin-left: 4px; width: 14px"></i>
      </ng-template>
    </lv-form-label>
    <lv-form-control lvErrorTip="email cannot be empty">
      <input lv-input formControlName="email" />
    </lv-form-control>
  </lv-form-item>
  <lv-form-item>
    <lv-form-label lvRequired>Gender</lv-form-label>
    <lv-form-control lvErrorTip="gender cannot be empty">
      <lv-radio-group formControlName="gender" [lvGroupName]="'RG01'">
        <lv-group [lvGutter]="'48px'">
          <lv-radio [lvValue]="'male'">male</lv-radio>
          <lv-radio [lvValue]="'female'">female</lv-radio>
        </lv-group>
      </lv-radio-group>
    </lv-form-control>
  </lv-form-item>
  <lv-form-item>
    <lv-form-label>Status</lv-form-label>
    <lv-form-control>
      <lv-checkbox-group formControlName="status">
        <lv-group [lvGutter]="'48px'">
          <lv-checkbox [lvValue]="'item001'">Item 001</lv-checkbox>
          <lv-checkbox [lvValue]="'item002'">Item 002</lv-checkbox>
          <lv-checkbox [lvValue]="'item003'">Item 003</lv-checkbox>
          <lv-checkbox [lvValue]="'item004'">Item 004</lv-checkbox>
          <lv-checkbox [lvValue]="'item005'">Item 005</lv-checkbox>
        </lv-group>
      </lv-checkbox-group>
    </lv-form-control>
  </lv-form-item>
  <lv-form-item *ngIf="formGroup.contains('phone')">
    <lv-form-label lvRequired>Phone</lv-form-label>
    <lv-form-control lvErrorTip="phone cannot be empty">
      <input lv-input formControlName="phone" />
    </lv-form-control>
  </lv-form-item>
  <lv-form-item>
    <lv-form-label
      >Description<i
        lv-icon="icon-help"
        lv-tooltip="only support mailbox"
        style="margin-left: 4px; width: 14px"
      ></i
    ></lv-form-label>
    <lv-form-control>
      <textarea lv-input rows="4" formControlName="description"></textarea>
    </lv-form-control>
  </lv-form-item>
  <lv-form-item>
    <lv-form-label>Hobbies</lv-form-label>
    <lv-form-control lvErrorTip="Maximum of 3 allowed">
      <lv-input-tag formControlName="hobbies" [lvSaveOnBlur]="true"></lv-input-tag>
    </lv-form-control>
  </lv-form-item>
  <div style="margin-top: 20px">
    <button lv-button [lvLoading]="loading" (click)="register()" class="aui-gutter-row-md">Registe</button>
    <!-- <button lv-button [lvLoading]='loading' (click)='register()' [disabled]='!formGroup.valid'
        class="aui-gutter-row-md">Registe</button> -->
    <button lv-button (click)="reset()">Reset</button>
  </div>
</lv-form>
